<template>
  <div class="qualityRoot" v-show='Object.keys(quality).length'>
    <img :src="quality.coverImgUrl" class="bgImg" alt="">
    <img :src="quality.coverImgUrl" class="discoverImg" alt="">
    <div class="entryInfo">
      <div class="tag">
        <i class="iconfont icon-good"></i>
        精品歌单
      </div>
      <div class="name">{{quality.name}}</div>
      <div class="desc">{{quality.copywriter}}</div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    quality: {
      type: Object,
      defalut() {
        return {}
      }
    }
  },
  setup() {
    return {}
  }
}
</script>

<style scoped>
.qualityRoot {
  display: flex;
  position: relative;
  width: 100%;
  height: 140px;
  border-radius: 10px;
  overflow: hidden;
  font-size: 14px;
}

.bgImg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: -5;
  transform: translateY(-80px);
  filter: blur(30px) brightness(70%);
}
.discoverImg {
  width: 120px;
  height: 120px;
  margin: 10px;
}
.tag {
  width: 100px;
  padding: 5px 10px;
  margin: 20px 0 15px;
  color: orange;
  border: 1px solid orange;
  border-radius: 15px;
}
.tag i {
  font-size: 14px;
}
.name {
  margin-bottom: 10px;
  color: #fff;
}
.desc {
  color: #000;

  font-size: 12px;
}
</style>